<template>
  <div class="control-bar pt-8 px-8 pb-16 fs-xl t-grey">
    <el-tooltip effect="dark" content="撤销" placement="left">
      <div class="control-item d-flex jc-center al-center mb-8 pointer" :class="{ disabled: snapshotIndex === 0 }">
        <SvgIcon icon-class="back" @mouseup="BACK_SNAPSHOT"></SvgIcon>
      </div>
    </el-tooltip>
    <el-tooltip effect="dark" content="重做" placement="left">
      <div
        class="control-item d-flex jc-center al-center mb-8 pointer"
        :class="{
          disabled: snapshotIndex + 1 > snapshotData.length - 1
        }"
      >
        <SvgIcon icon-class="restore" @mouseup="RESTORE_SNAPSHOT"></SvgIcon>
      </div>
    </el-tooltip>
    <el-tooltip effect="dark" content="复制组件" placement="left">
      <div class="control-item d-flex jc-center al-center mb-8 pointer" :class="{ disabled: !activeComponent }">
        <SvgIcon icon-class="copy" @mouseup="COPY_COMPONENT"></SvgIcon>
      </div>
    </el-tooltip>
    <el-tooltip effect="dark" content="放大画布" placement="left">
      <div class="control-item d-flex jc-center al-center mb-8 pointer" :class="{ disabled: scaleRatio === 2 }">
        <SvgIcon icon-class="plus" @mouseup="onScale(0.05, 'plus')"></SvgIcon>
      </div>
    </el-tooltip>
    <el-tooltip effect="dark" content="缩小画布" placement="left">
      <div class="control-item d-flex jc-center al-center mb-8 pointer" :class="{ disabled: scaleRatio === 0.25 }">
        <SvgIcon icon-class="minus" @mouseup="onScale(-0.05, 'minus')"></SvgIcon>
      </div>
    </el-tooltip>
    <div class="fs-sm t-center">{{ (scaleRatio * 100).toFixed(0) }}%</div>
  </div>
</template>

<script>
  import { mapGetters, mapMutations } from 'vuex';

  export default {
    computed: {
      ...mapGetters('component', ['snapshotIndex', 'snapshotData', 'activeComponent', 'scaleRatio'])
    },

    methods: {
      ...mapMutations('component', ['BACK_SNAPSHOT', 'RESTORE_SNAPSHOT', 'COPY_COMPONENT', 'SET_SCALERATIO']),

      // 放大/缩小画布
      onScale(ratio, type) {
        if (type === 'plus' && this.scaleRatio === 2) return;
        if (type === 'minus' && this.scaleRatio === 0.25) return;
        this.SET_SCALERATIO(Number((this.scaleRatio + ratio).toFixed(2)));
        const $previewerContainer = this.$parent.$refs['preview-container'];
        const transform = $previewerContainer.style.transform;
        $previewerContainer.style.transform = transform.replace(/scale\((.+)\)/, () => `scale(${this.scaleRatio})`);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .control-bar {
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0 0 0 6px;
    background-color: #f9f9f9;
    box-shadow: 0 6px 20px 1px rgba(0, 5, 97, 0.04);
    user-select: none;

    .control-item {
      border-radius: 50%;
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      transition: all 0.2s;

      &:hover {
        color: map-get($colors, 'theme');
        background-color: #e8f2ff;
      }

      &.disabled {
        color: #e6e6e6;
        cursor: not-allowed;
      }
    }
  }
</style>
